<?php slot('user', $user); ?>
<?php slot('sub', $sub); ?>
<?php slot('menu', $menu); ?>
<link type="text/css" rel="stylesheet" href="/web/css/private_zone.css" />

<div class="center">
    <div id="center_conteiner" class="clearfix">
        <div class="center_sub_conteiner">

            <div class="center_block">
                <div class="header_center_block"><span>Balance</span></div>
                <div class="center_line">
                    <div class="user_balance_label">Balance:</div>
                    <div class="user_balance_info"><?php echo $user->getBalance() ?>$</div>
                </div>
            </div>

            <div class="center_block">
                <div class="header_center_block"><span>Search Orders</span></div>

                <div class="center_line">
                    <div class="order_id_search" value="<?php echo $user->getId() ?>">
                        <label for="order_id_input_search">Order ID</label>
                        <input type="text" id="order_id_input_search">
                    </div>

                    <div class="user_search_by">
                        <label for="user_search_by_select">Search by</label>
                        <select id="order_search_sort">
                            <option value="<?php echo sbValues::ORDER_SORT_MONTH ?>">Last month</option>
                            <option value="<?php echo sbValues::ORDER_SORT_TODAY ?>">Today</option>
                            <option value="<?php echo sbValues::ORDER_SORT_DATE ?>">Date</option>
                        </select>
                    </div>

                    <div class="user_search_by_date_in">
                        <label for="user_search_by_date_in_input">From date</label>
                        <input type="text" id="order_search_by_date_from">
                        <img src="/web/images/icoCalendar.png"/>
                    </div>

                    <div class="user_search_by_date_out">
                        <label for="user_search_by_date_out_input">To date</label>
                        <input type="text" id="order_search_by_date_to">
                        <img src="/web/images/icoCalendar.png"/>
                    </div>
                </div>

                <div class="center_line">
                    <input type="button" id="orders_search_button" value="Search">
                </div>

                <div class="header_center_block"><span>My Orders</span></div>
                <div class="orders_container">
                    <div class="order_line">
                        <div class="order_line_id_title">id</div>
                        <div class="order_line_id_from_date_title">from date</div>
                        <div class="order_line_id_to_date_title">to date</div>
                        <div class="order_line_id_hotel_title">hotel</div>
                        <div class="order_line_id_amount_title">amount</div>
                        <div class="order_line_id_commission_title">commission</div>
                    </div>
                    <?php
                    foreach ($orders as $o) {
                        echo '<div class="order_line order_information">'
                        . '<div class="order_line_id">' . $o['id'] . '</div>'
                        . '<div class="order_line_id_from_date">' . $o['from_date'] . '</div>'
                        . '<div class="order_line_id_to_date">' . $o['to_date'] . '</div>'
                        . '<div class="order_line_id_hotel">' . $o['Hotel']['name_en'] . '</div>'
                        . '<div class="order_line_id_amount">' . $o['amount'] . '</div>'
                        . '<div class="order_line_id_commission">' . $o['commissions'] . '</div>'
                        . '<div class="order_line_id_cancellation_button" value="' . $o['status'] . '" order="' . $o['id'] . '"><a>Cancellation</a></div>'
                        . '<div class="order_line_id_cancellation_button_load" order="' . $o['id'] . '">Wait<img src="/web/images/302.gif"/></div>'
                        . '<div class="order_line_id_view_button"><a href="' . url_for('vaucher', array('order' => $o['id'])) . '" target="_blank">View</a></div>'
                        . '</div>';
                    }
                    ?>
                    <div class="order_message">
                        <div class="order_message_title">Title</div>
                        <div class="order_message_text"><p>Text</p></div>
                        <div class="order_message_button">Done</div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<script>
    $(function() {
        $('#order_search_by_date_from').datepicker({
            dateFormat: 'yy-mm-dd',
            onClose: function(selectedDate) {
                $("#order_search_by_date_to").datepicker("option", "minDate", selectedDate);
            }
        });

        $('.user_search_by_date_in img').click(function() {
            $('#order_search_by_date_from').datepicker("show");
        });

        $('#order_search_by_date_to').datepicker({
            dateFormat: 'yy-mm-dd'
        });

        $('.user_search_by_date_out img').click(function() {
            $('#order_search_by_date_to').datepicker("show");
        });

        $('#order_search_sort').change(function() {
            if (parseInt($(this).val()) === 3) {
                $('.user_search_by_date_in').show();
                $('.user_search_by_date_out').show();
            } else {
                $('.user_search_by_date_in').hide();
                $('.user_search_by_date_out').hide();
            }
        });

        $('#orders_search_button').on('click', function() {
            var order = 0, sort = 2, from = null, to = null;

            if ($('#order_id_input_search').val()) {
                order = $('#order_id_input_search').val();
            }

            if ($('#order_search_sort').val()) {
                sort = $('#order_search_sort').val();
            }

            if ($('#order_search_by_date_from').val()) {
                from = $('#order_search_by_date_from').val();
            }

            if ($('#order_search_by_date_to').val()) {
                to = $('#order_search_by_date_to').val();
            }

            window.location.assign(urlBackend + 'cabinet/order/' + order + '/sort/' + sort + '/from/' + from + '/to/' + to);
        });

        $('.order_line_id_cancellation_button').on('click', function() {
            if (parseInt($(this).attr('value')) === 1) {
                cancellation(this);
            }
        });

        checkStatus();

        $('.order_message_button').on('click', function() {
            hideMessage();
        });
    });

    function cancellation(obj) {
        var order = $(obj).attr('order');
        var parent = $(obj).parent();
        var loader = $(parent).find('div.order_line_id_cancellation_button_load');
        $.ajax({
            type: 'POST',
            url: urlBackend + "cancellation",
            data: {
                order_id: order
            },
            beforeSend: function() {
                $(loader).show();
            },
            success: function(msg) {
                $(loader).hide();
                showMessage(msg);
            }
        });
    }

    function checkStatus() {
        var status = [
            'Cancel', 'Canceled', 'In proccess'
        ];
        $('.order_information').each(function(i, v) {
            var b = $(v).find('div.order_line_id_cancellation_button');
            console.log($(b).attr('value'));
            if (parseInt($(b).attr('value')) === 1) {
                $(b).html(status[0]);
            } else if (parseInt($(b).attr('value')) === 2) {
                $(b).html(status[1]);
            } else if (parseInt($(b).attr('value')) === 3) {
                $(b).html(status[2]);
            }
        });
    }

    function showMessage(message) {
        var winWidth = $(window).width();
        var winHeight = $(window).height();

        var boxWidth = 250;
        var disWidth = (winWidth / 4) - 100;
        var disHeight = (winHeight / 3);
        $('.order_message').css({'left': disWidth + 'px', 'top': disHeight + 'px'});
        $('.order_message_text p').html(message);
        $('.order_message').show();
    }

    function hideMessage() {
        $('.order_message').hide();
    }
</script>